<template>
  <div class="containers">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules" size="small">
      <el-card shadow="never" class="mb20">
        <el-form-item prop="reportName" label="报表名称">
          <el-input v-model="form.reportName" placeholder="请输入报表名称"/>
        </el-form-item>
        <el-form-item prop="reportSource" label="数据源">
          <el-input type="textarea" v-model="form.reportSource" placeholder="请输入报表数据源"></el-input>
        </el-form-item>
        <el-form-item prop="pagination" label="是否分页">
        <el-radio-group v-model="form.pagination">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item prop="enable" label="是否启用">
        <el-radio-group v-model="form.enable">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item prop="reportCondition" label="报表查询条件">
          <div style="text-align: right;">
            <el-button type="primary" title="添加字段" size="mini" @click="handleAddQueryColumn">添加查询字段</el-button>
          </div>
          <el-table
            :data="queryColumns"
            stripe
            border
          >
            <el-table-column prop="fieldName" label="字段名">
              <template scope="scope">
                <el-input v-model="scope.row.fieldName" placeholder="请输入" />
              </template>
            </el-table-column>
            <el-table-column prop="showName" label="字段显示名">
              <template scope="scope">
                <el-input v-model="scope.row.showName" placeholder="请输入" />
              </template>
            </el-table-column>
            <el-table-column prop="fieldType" label="字段类型">
              <template scope="scope">
                <!--
                <el-select v-model="scope.row.fieldType" 
                placeholder="请选择" clearable
                :style="{ width: [ Object.keys(columnTypeList)[2],Object.keys(columnTypeList)[5],Object.keys(columnTypeList)[6] ].indexOf(scope.row.fieldType) >= 0 ? 'calc(100% - 20px)' : 'auto'}">
                  <el-option v-for="(value, key) in columnTypeList" :key="key" :label="value" :value="key" />
                </el-select> <i 
                v-if="[ Object.keys(columnTypeList)[2],Object.keys(columnTypeList)[5],Object.keys(columnTypeList)[6] ].indexOf(scope.row.fieldType) >= 0" 
                class="el-icon-setting" 
                title="设置字段详情" 
                style="margin-left: 5px; cursor: pointer;" @click="handleSetFieldDetail(scope.row, scope.$index)"></i> -->
                <el-select v-model="scope.row.fieldType" 
                placeholder="请选择" clearable
                :style="{ width: Object.keys(columnTypeList)[2] === scope.row.fieldType ? 'calc(100% - 20px)' : 'auto'}">
                  <el-option v-for="(value, key) in columnTypeList" :key="key" :label="value" :value="key" />
                </el-select>
                <i 
                v-if="Object.keys(columnTypeList)[2] === scope.row.fieldType" 
                class="el-icon-setting" 
                title="设置下拉选项" 
                style="margin-left: 5px; cursor: pointer;" @click="handleSetFieldDetail(scope.row, scope.$index)"></i>
              </template>
            </el-table-column>
            <el-table-column prop="dataType" label="数据类型">
              <template scope="scope">
                <el-select v-model="scope.row.dataType" placeholder="请选择" clearable>
                  <el-option v-for="(value, key) in columnDataTypeList" :key="key" :label="value" :value="key" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="conditionType" label="条件类型">
              <template scope="scope">
                <el-select v-model="scope.row.conditionType" placeholder="请选择" clearable>
                  <el-option v-for="(value, key) in conditionTypeList" :key="key" :label="value" :value="key" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="width" label="布局宽度">
              <template scope="scope">
                <el-select v-model="scope.row.width" placeholder="请选择" clearable>
                  <el-option v-for="(value, key) in 24" :key="key" :label="value + '/24'" :value="key + 1" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="130">
              <template scope="scope">
                <el-button type="danger" size="mini" circle icon="el-icon-delete" title="移除" @click="handleRemoveQueryColumn(scope.row, scope.$index)"></el-button>
                <el-button v-if="scope.$index > 0" type="primary" size="mini" circle icon="el-icon-top" title="上移" @click="handleMoveUpQueryColumn(scope.row, scope.$index)"></el-button>
                <el-button v-if="scope.$index < queryColumns.length - 1" type="primary" size="mini" circle icon="el-icon-bottom" title="下移" @click="handleMoveDownQueryColumn(scope.row, scope.$index)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item prop="reportLayout" label="报表表头设置">
          <div style="text-align: right;">
            <el-button type="primary" title="添加报表字段" size="mini" @click="handleAddTabColumn">添加报表字段</el-button>
          </div>
          <el-table
            :data="reportColumns"
            stripe 
            border
          >
            <el-table-column prop="fieldName" label="字段名">
              <template scope="scope">
                <el-input v-model="scope.row.fieldName" placeholder="请输入" />
              </template>
            </el-table-column>
            <el-table-column prop="showName" label="字段显示名">
              <template scope="scope">
                <el-input v-model="scope.row.showName" placeholder="请输入" />
              </template>
            </el-table-column>
            <el-table-column prop="width" label="所占列宽(px)">
              <template scope="scope">
                <el-input-number v-model="scope.row.width" :min="0"  label="请输入"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="130">
              <template scope="scope">
                <el-button type="danger" size="mini" circle icon="el-icon-delete" title="移除" @click="handleRemoveTabColumn(scope.row, scope.$index)"></el-button>
                <el-button v-if="scope.$index > 0" type="primary" size="mini" circle icon="el-icon-top" title="上移" @click="handleMoveUpTabColumn(scope.row, scope.$index)"></el-button>
                <el-button v-if="scope.$index < reportColumns.length - 1" type="primary" size="mini" circle icon="el-icon-bottom" title="下移" @click="handleMoveDownTabColumn(scope.row, scope.$index)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <div style="margin-top: 20px; text-align: center;">
          <el-button class="filter-item" type="primary" title="保存" :loading="submitLoading" @click="handleSave">保存</el-button>
          <el-button class="filter-item" type="primary" plain title="返回" @click="handleReturn">返回</el-button>
        </div>
      </el-card>
    </el-form>
    <SetOptionsDialog ref="SetOptionsDialog" @setFieldCallBack="setFieldCallBack" />
    <!-- <SetOrgFieldDialog ref="SetOrgFieldDialog" @setFieldCallBack="setFieldCallBack" /> -->
  </div>
</template>

<script>
  import enums from '@/utils/enums'
  import SetOptionsDialog from './components/SetOptionsDialog'
  // import SetOrgFieldDialog from './components/SetOrgFieldDialog'
  import { get, create, update } from '@/api/report'

export default {
  // name: '报表设计',
  components: {
    SetOptionsDialog,
    // SetOrgFieldDialog
  },
  data() {
    return {
      queryColumns: [],
      reportColumns: [],
      form: {
        reportName: '',
        reportSource: '',
        pagination: 1,
        reportCondition: '',
        reportLayout: ''
      },
      rules: {
        reportName: [{ required: true, message: '请输入报表名称', trigger: 'blur' }],
        reportSource: [{ required: true, message: '请输入报表数据源', trigger: 'blur' }],
      },
      submitLoading: false
    }
  },
  watch: {
    queryColumns: {
      handler: function(n, o) {
        this.form.reportCondition = JSON.stringify(n)
      },
      deep: true
    },
    reportColumns: {
      handler: function(n, o) {
        this.form.reportLayout = JSON.stringify(n)
      },
      deep: true
    }
  },
  computed: {
    columnTypeList() {
      return enums.COLUMN_TYPE
    },
    columnDataTypeList() {
      return enums.COLUMN_DATA_TYPE
    },
    conditionTypeList() {
      return enums.CONDITION_TYPE
    },
  },
  async created() {
    await this.getInfo()
  },
  methods: {
    async getInfo() {
      const id = this.$route.query.id
      if (!id) {
        return
      }
      this.form = {}
      const res = await get(id)
      if (res) {
        this.form = res.data
        if (res.data.reportCondition) {
          this.queryColumns = JSON.parse(res.data.reportCondition)
        }
        if (res.data.reportLayout) {
          this.reportColumns = JSON.parse(res.data.reportLayout)
        }
      }
    },
    handleAddQueryColumn() { // 添加查询列
      this.queryColumns.push({ width: 6 })
    },
    handleSetFieldDetail(row, index) {
      if (row.fieldType === Object.keys(this.columnTypeList)[2]) {
        this.$refs.SetOptionsDialog.show(row, index) // 当查询列为下拉框时，需要设置下拉选项的值
      } else if (row.fieldType === Object.keys(this.columnTypeList)[5] || row.fieldType === Object.keys(this.columnTypeList)[6]) {
        this.$refs.SetOrgFieldDialog.show(row, index) // 当查询列为部门岗位、部门人员时，需要设置部门对应的字段、岗位/人员对应的字段
      }
    },
    setFieldCallBack(row, index) { // 设置字段详情回调
      this.queryColumns.splice(index, 1)
      this.queryColumns.splice(index, 0, row)
    },
    handleRemoveQueryColumn(row, index) { // 移除查询列
      this.queryColumns.splice(index, 1)
    },
    handleMoveUpQueryColumn(row, index) { // 查询列上移
      this.queryColumns.splice(index, 1)
      this.queryColumns.splice(index - 1, 0, row)
    },
    handleMoveDownQueryColumn(row, index) { // 查询列下移
      this.queryColumns.splice(index, 1)
      this.queryColumns.splice(index + 1, 0, row)
    },
    handleAddTabColumn() { // 添加报表列
      this.reportColumns.push({})
    },
    handleRemoveTabColumn(row, index) { // 移除报表列
      this.reportColumns.splice(index, 1)
    },
    handleMoveUpTabColumn(row, index) { // 报表列上移
      this.reportColumns.splice(index, 1)
      this.reportColumns.splice(index - 1, 0, row)
    },
    handleMoveDownTabColumn(row, index) { // 报表列下移
      this.reportColumns.splice(index, 1)
      this.reportColumns.splice(index + 1, 0, row)
    },
    handleSave() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitLoading = true
          if (this.form.id) {
            update(this.form).then(res => {
              this.$message.success('修改成功')
              this.submitLoading = false
              this.$router.push({ 
                path: '/reportForms/index',
              })
            })
          } else {
            create(this.form).then(res => {
              this.$message.success('新增成功')
              this.submitLoading = false
              this.$router.push({ 
                path: '/reportForms/index',
              })
            })
          }
        }
      })
    },
    handleReturn() {
      this.$router.push({ 
        path: '/reportForms/index',
      })
    },
  }
}
</script>

<style lang="scss">


</style>
